<template>
  <div>
    <!-- 标题 -->
    <div class="settitle">
      <div class="setimg" @click="$router.back()">
        <img src="../assets/imgs/iconse/左箭头.png" alt="" />
      </div>
      <div class="text">
        <h2>收藏职位</h2>
      </div>
    </div>
    <!--选项卡  -->

    <div
      class="jobW_card"
      v-for="item in newlists"
      :key="item.id"
      @click="books(item.id)"
    >
      <div class="jobW_card_title">
        <div class="title_text">
          <h3>{{ item.title }}</h3>
          <div class="paric">
            {{ item.paric }}
            <div class="state">
              <h4>{{ item.state }}</h4>
            </div>
          </div>
        </div>
        <div class="jobW_card_list">
          <div class="jobW_card_item" v-for="tx in item.text" :key="tx">
            {{ tx }}
          </div>
        </div>
        <div class="jobW_company">
          <div class="company_mes">
            <div class="compay_items" v-for="com in item.compay" :key="com">
              {{ com }}
            </div>
          </div>
          <div class="place">{{ item.place }}</div>
        </div>
      </div>
    </div>

    <!--选项卡 END -->
  </div>
</template>

<script>
import { getJobwantJsonData } from "../api/jobwant.js";
export default {
  data() {
    return {
      jcardLists: null,
      newlists: null,
    };
  },
  methods: {
    getJcardListsFun() {
      getJobwantJsonData().then((data) => {
        this.jcardLists = data.jcardLists;
      });
    },
    books(id) {
      console.log(id);
      localStorage.setItem("ids", id);
      this.$router.push("bookmark");
    },
    collect() {
      // JSON.parse(list)是把字符串转数组 存的时候转字符串，取就转对象
      // JSON.stringify(newlist)是把数组转字符串 存的时候转字符串，取就转对象
      let lists = JSON.parse(localStorage.getItem("collect"));
      console.log(lists);

      if (this.jcardLists) {
        let aa=[];
        for (let i = 0; i < lists.length; i++) {
          console.log(lists[i].id);
          let items = this.jcardLists.find((item) => item.id == lists[i].id);
          aa.push(items)
          console.log( "collect",items);
        }
        console.log(aa);
        this.newlists=aa
        //   this.jcardLists.filter((item) => item.id == lists[i].id);
      }
    },
  },
  created() {
    this.getJcardListsFun();
    this.collect();
  },
  watch: {
      jcardLists: function () {
        this.collect();
    },
  },
};
</script>

<style lang="scss" scoped>
.settitle {
  height: 60px;
  display: flex;
  align-items: center;
  background-color: #fff;
  box-shadow: 0px 0px 0px 1px rgba($color: #cccc, $alpha: 0.4);
  .setimg {
    height: 18px;
    position: absolute;
    left: 15px;
    img {
      height: 100%;
      display: block;
    }
  }
  .text {
    margin: 0 auto;
  }
}

/* 选项卡 */
.jobW_card {
  box-sizing: border-box;
  padding: 0px 16px;
  margin-top: 10px;
}
.jobW_card_title {
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  .title_text {
    display: flex;
    box-sizing: border-box;
    padding: 0 18px;
    margin-top: 8px;
    justify-content: space-between;
    h3 {
      width: 60%;
      display: block;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      font-weight: 800;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .paric {
      position: relative;
      width: 27%;
      display: block;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      font-weight: 800;
      color: #f95d39;
    }
  }
}
.title_text {
  .state {
    position: absolute;
    box-sizing: border-box;
    height: 14px;
    left: -50px;
    top: -10px;
    bottom: 0px;
    margin: auto 0;
    border: 1px solid #5c94f5;
    h4 {
      font-size: 12px;
      display: block;
      height: 14px;
      line-height: 11px;
      color: #5c94f5;
      transform: scale(0.78);
    }
  }
}
.jobW_card_list {
  display: flex;
  padding-left: 18px;
  margin-bottom: 16px;
  .jobW_card_item {
    height: 22px;
    line-height: 22px;
    display: block;
    font-size: 12px;
    padding: 7px 10px 6px;
    margin-right: 6px;
    border-radius: 5px;
    background-color: #f6f6f6;
  }
}
.jobW_company {
  display: flex;
  padding: 0px 16px;
  margin-bottom: 22px;
  justify-content: space-between;
  .company_mes {
    position: relative;
    margin-left: 36px;
    display: flex;
    &::before {
      content: "";
      display: block;
      position: absolute;
      width: 25px;
      height: 25px;
      top: 0px;
      bottom: 0px;
      margin: auto 0px;
      left: -30px;
      background: url(../assets/imgs/量子恒道.png) no-repeat center center;
      background-size: 100%;
    }
    .compay_items {
      font-size: 14px;
      margin-right: 15px;
    }
  }
  .place {
    color: #cecece;
    font-size: 14px;
  }
}
</style>